<template>
    <div style="width: 100%">
        <el-table :data="tableData" stripe >
            <el-table-column                    label="注册卡名" width="200">
                <template slot-scope="scope">
                    <span>{{scope.row.keyname}}</span>
                </template>
            </el-table-column>
            <el-table-column                    label="前缀"     width="200">
                <template slot-scope="scope">
                    <span>{{scope.row.prefix}}</span>
                </template>
            </el-table-column>
            <el-table-column                    label="天数"     >
                <template slot-scope="scope">
                    <el-input  v-model="scope.row.cday" placeholder="填写卡密天数" clearable size="small" v-show="currentEdit==scope.$index"></el-input>
                    <span v-show="currentEdit!=scope.$index">{{scope.row.cday}}</span>
                </template>
            </el-table-column>
            <el-table-column                    label="点数"     >
                <template slot-scope="scope">
                    <el-input  v-model="scope.row.points" placeholder="填写卡密点数" clearable size="small" v-show="currentEdit==scope.$index"></el-input>
                    <span v-show="currentEdit!=scope.$index">{{scope.row.points}}</span>
                </template>
            </el-table-column>
            <el-table-column                    label="零售价"     >
                <template slot-scope="scope">
                    <el-input  v-model="scope.row.retailprice" type="number" placeholder="填写卡密零售价" clearable size="small" v-show="currentEdit==scope.$index"></el-input>
                    <span v-show="currentEdit!=scope.$index">{{scope.row.retailprice}}</span>
                </template>
            </el-table-column>
            <el-table-column                    label="操作"     width="150">
                <template slot-scope="scope">
                    <div v-show="currentEdit!=scope.$index">
                        <i class="el-icon-edit main-ico-btn" style="margin-left:0" @click="handleEdit(scope.$index)"></i>
                        <i class="el-icon-delete main-ico-btn" @click="handleRemove(scope.$index)"></i>
                    </div>
                    <div v-show="currentEdit==scope.$index">
                        <el-button size="mini"  @click="handleSave(scope.$index)">保存</el-button>
                        <el-button size="mini"  @click="handleCancel(scope.$index)">取消</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-table :data="[1]"  :show-header="false">
            <el-table-column prop="date" label="" width="200">
                <template slot-scope="scope" >
                    <el-input  v-model="keyname" placeholder="填写注册卡名" clearable size="small"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="" width="200">
                <template slot-scope="scope" >
                    <el-input  v-model="prefix" placeholder="填写卡密前缀" clearable size="small"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="">
                <template slot-scope="scope" >
                    <el-input  v-model="cday" placeholder="填写卡密天数" clearable size="small"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="">
                <template slot-scope="scope" >
                    <el-input  v-model="points" placeholder="填写卡密点数" clearable size="small"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="">
                <template slot-scope="scope" >
                    <el-input  v-model="retailprice" placeholder="填写卡密零售价" clearable size="small"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="" width="150">
                <template slot-scope="scope" >
                    <el-button size="mini" type="primary"  @click="handleAdd">添加</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
  name: "igfkeycard",
  data() {
    return {
      tableData: [],
      currentEdit: -1,
      keyname: "",
      prefix: "",
      cday: 0,
      points: 0,
      retailprice: 0
    };
  },
  props: {
    softcode: {
      type: String,
      default: ""
    }
  },
  methods: {
    init() {
      this.$http
        .post("/soft/findkeyset", { softcode: this.softcode })
        .then(res => {
          this.tableData = res;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    async handleAdd() {
      if (this.$utils.isNullOrEmpty(this.keyname)) {
        this.$message.error("注册卡名不能为空！");
        return;
      }
      if (this.$utils.isNullOrEmpty(this.prefix)) {
        this.$message.error("前缀不能为空！");
        return;
      }
      if (!this.$utils.isNumber(this.cday)||this.cday<=0) {
        this.$message.error("天数只能为数字且不能小于0！");
        return;
      }
      if (!this.$utils.isNumber(this.points)||this.points<=0) {
        this.$message.error("点数只能为数字且不能小于0！");
        return;
      }
      if (!this.$utils.isNumber(this.retailprice)||this.retailprice<=0) {
        this.$message.error("价格只能为数字且不能小于0！");
        return;
      }
      let keyData = {
        softcode: this.softcode,
        keyname: this.keyname,
        prefix: this.prefix,
        cday: this.cday,
        points: this.points,
        retailprice: this.retailprice
      };
      let res = await this.$http.post("/soft/addkeyset", keyData);
      if (res.status) {
        this.tableData.push(keyData);
        this.keyname = "";
        this.prefix = "";
        this.cday = 0;
        this.points = 0;
        this.retailprice = 0;
        this.$message({
          message: res.text,
          type: "success"
        });
      } else {
        this.$message.error(res.text);
      }
    },
    handleEdit(index) {
      this.currentEdit = index;
    },
    async handleRemove(index) {
      try {
        await this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        let res = await this.$http.post(
          "/soft/removekeyset",
          this.tableData[index]
        );
        if (res.status) {
          this.tableData.splice(index, 1);
        } else {
          this.$message.error(res.text);
        }
      } catch (err) {}
    },
    async handleSave(index) {
      if (this.tableData[index].keyname === "") {
        this.$message.error("注册卡名不能为空！");
        return;
      }
      if (this.tableData[index].prefix === "") {
        this.$message.error("前缀不能为空！");
        return;
      }
      if (this.tableData[index].cday < 0) {
        this.$message.error("天数不能小于0！");
        return;
      }
      if (this.tableData[index].points < 0) {
        this.$message.error("点数不能小于0！");
        return;
      }
      if (this.tableData[index].retailprice < 0) {
        this.$message.error("价格不能小于0！");
        return;
      }
      let res = await this.$http.post(
        "/soft/updatekeyset",
        this.tableData[index]
      );
      if (res.status) {
        this.$message({
          message: res.text,
          type: "success"
        });
        this.currentEdit = -1;
      } else {
        this.$message.error(res.text);
      }
    },
    handleCancel(index) {
      this.currentEdit = -1;
    }
  },
  created() {
    this.init();
  }
};
</script>

<style scoped>
</style>
